import React, {Component} from 'react';
import {View, Text, FlatList} from 'react-native';
import {Divider, List} from 'react-native-paper';

export default class albumItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      album: {
        albumId: '',
        albumName: '',
        albumSinger: '',
        albumImg: '',
        albumStatus: '',
      },
      songList: [
        {
          albumId: '1',
          albumName: '专辑1',
          albumSinger: '李荣浩',
          albumImg: '',
          albumStatus: '',
        },
        {
          albumId: '2',
          albumName: '专辑2',
          albumSinger: '梁静茹',
          albumImg: '',
          albumStatus: '',
        },
        {
          albumId: '3',
          albumName: '专辑3',
          albumSinger: '梁静茹',
          albumImg: '',
          albumStatus: '',
        },
      ],
    };
  }

  //列表项渲染
  __itemRender = (item, index, separators) => {
    const i = item.item;
    return (
      <List.Item
        title={i.albumName}
        description={'歌手：' + i.albumSinger}
        left={() => <List.Icon color="purple" icon="book-multiple" />}
        right={() => (
          <List.Icon color="purple" icon="arrow-right-bold-circle" />
        )}
        onPress={() => {
          // this.props.navigation.navigate('Player');
        }}
      />
    );
  };

  //Key生成
  __keyExtractor = (item, index) => {
    return item.songId;
  };

  //行与行之间的分隔线组件
  __itemSeparatorComponent = () => {
    return <Divider />;
  };

  render() {
    return (
      <FlatList
        data={this.state.songList}
        ListEmptyComponent={() => {
          <Text>没有数据</Text>;
        }}
        renderItem={this.__itemRender}
        refreshing={true}
        keyExtractor={this.__keyExtractor}
        ItemSeparatorComponent={this.__itemSeparatorComponent}
      />
    );
  }
}
